<template>

	<div class="login">

		<el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-content">
			<h3 class="title">后台管理系统</h3>
			<el-form-item prop="name">
				<el-input v-model="loginForm.name" type="text" size="large" auto-complete="off" placeholder="账号">
					<template #prefix>
						<el-icon>
							<Avatar />
						</el-icon>
					</template>
				</el-input>
			</el-form-item>
			<el-form-item prop="password">
				<el-input v-model="loginForm.password" type="password" size="large" auto-complete="off"
					placeholder="密码">
					<template #prefix>
						<el-icon>
							<View />
						</el-icon>
					</template>
				</el-input>
			</el-form-item>

			<el-button size="large" type="primary" style="width:100%;" @click.prevent="handleLogin">
				<span v-if="!loading">登 录</span>
				<span v-else>登 录 中...</span>
			</el-button>
		</el-form>


	</div>
</template>

<script setup>
     
	import {
		ref,
		reactive,
		toRefs,
		getCurrentInstance,
		onMounted
	} from 'vue';
	import router from "@/router";
	import {useMainStore} from '@/store'
	const store = useMainStore()
	const {
		proxy
	} = getCurrentInstance();
	
	const loading = ref(false);
	const loginForm = reactive({
		name: "",
		password: ''
	});
	const loginRules = reactive({
		name: [{
			required: true,
			trigger: "blur",
			message: "请输入您的账号"
		}],
		password: [{
			required: true,
			trigger: "blur",
			message: "请输入您的密码"
		}],
	});
	const handleLogin = () => {
		proxy.$axios.post('/admin/index/login', loginForm)
			.then(res => {
				   loading.value = true;
				   store.ADD_USER(res);
				   router.push({ path:  "/index" });
			})
			.catch(err => {
				loading.value = false;
			})
	}



	onMounted(() => {

		// console.log(store.state.userInfo)
	})
</script>

<style>
	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-image: url("../assets/images/login-background.jpg");
		background-size: cover;
	}

	.input {
		margin-bottom: 20px;
	}

	.title {
		margin: 0px auto 30px auto;
		text-align: center;
		color: #707070;
	}

	.login-content {
		border-radius: 6px;
		background: #ffffff;
		width: 400px;
		padding: 25px;
	}
</style>
